<template>
  <div class="_wz_trainingRecordsDetails">
    <Card dis-hover :bordered="true">
      <template #title>搜索</template>
      <Form ref="formSearch" :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="从业人员">
          <i-input type="text" v-model="formDataSearch.driverName" placeholder="从业人员" clearable />
        </FormItem>
        <FormItem label="驾乘车辆">
          <i-input type="text" v-model="formDataSearch.driverVehiclePlate" placeholder="驾乘车辆" clearable />
        </FormItem>
        <FormItem label="培训进度">
          <i-select v-model="formDataSearch.finishState" filterable placeholder="培训进度" clearable>
            <Option value="0">未开始</Option>
            <Option value="2">进行中</Option>
            <Option value="1">已完成</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
      <template #title>列表</template>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>


  </div>
</template>
<script>


import {resolveComponent,getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex


import wzTbale from "../../components/table/index.vue";

//reactive
export default defineComponent({
  name: 'trainingRecordsDetails',//组件名称
  props: ['selectData'],//接收来自父组件的数据
  components: {
    wzTbale,//表格
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $common = inject('$common');//自己封装的方法

    // 用于获取$refs
    const wzTbale = ref();


    const state = reactive({
      formDataSearch:{
        trainPlanUuid:props.selectData.uuid
      },//搜索条件

      tableData: {
        url: apiUrl.educateTrainPlanTrainCourseStudentPlanList,//请求地址
        method: 'post',//请求方式
        where: {
          trainPlanUuid:props.selectData.uuid
        },//搜索条件
        height: '100%',//表格高度 auto
        page: true,//分页是否使用
        columns: [//表头数据
          {type: 'index', width: 70, align: 'center', title: '序号'},
          {title: '从业人员', key: 'driverName', minWidth: 100,tooltip:true,resizable: true},
          {title: '从业类型', key: 'driverTypeName', minWidth: 100,tooltip:true,resizable: true},
          {title: '驾乘车辆', key: 'driverVehicleNo', minWidth: 100,tooltip:true,resizable: true},
          {title: '身份证号', key: 'driverIdentifyNum', minWidth: 160,tooltip:true,resizable: true},
          {title: '联系电话', key: 'driverPhone', minWidth: 120,tooltip:true,resizable: true},
          {
            title: '培训情况', key: '', minWidth: 140,tooltip:true,resizable: true, render: (h, params) => {
              if (params.row.trainCourseStudentPlanFinish == 0) {
                return h(resolveComponent('Tag'), { type: 'dot',color: 'error'}, '未开始');
              } else if (params.row.trainCourseStudentPlanFinish == 1) {
                return h(resolveComponent('Tag'), { type: 'dot',color: 'success'}, '已完成');
              } else{
                return h(resolveComponent('Tag'), { type: 'dot',color: 'warning'}, '进行中');
              }
            }
          },
          {
            title: '培训时长', key: 'trainCourseStudentPlanTotalDuration', minWidth: 140,tooltip:true,resizable: true, render: (h, params) => {
              return h('span', params.row.trainCourseStudentPlanLearnDuration + "/"+params.row.trainCourseStudentPlanTotalDuration + "分钟");
            }
          },
          {
            title: '培训进度', key: '', minWidth: 100,tooltip:true,resizable: true, render: (h, params) => {
              return h('span', params.row.trainCourseStudentPlanFinishedNumber + "/" + params.row.trainCourseStudentPlanMaterialNumber);
            }
          },
          {
            title: '随堂测验', key: '', minWidth: 140,tooltip:true,resizable: true, render: (h, params) => {
              if (params.row.trainCourseStudentPlanExam == 1) {
                if (params.row.trainCourseStudentPlanExamState == 0) {
                  return h(resolveComponent('Tag'), { type: 'dot',color: 'error'}, '未开始');
                } else if (params.row.trainCourseStudentPlanExamState == 1) {
                  return h(resolveComponent('Tag'), { type: 'dot',color: 'success'}, '及格');
                } else{
                  return h(resolveComponent('Tag'), { type: 'dot',color: 'warning'}, '不及格');
                }
              } else{
                return h('span', '--')
              }
            }
          },
        ],
        pagingParameters:{// 分页参数
          page:'pageNo',
          limit:'pageSize'
        },
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      },

    });


    //搜索方法
    const searchSubmit = ()=>{
      let formDataSearch = JSON.parse(JSON.stringify(state.formDataSearch));
      state.tableData.where = formDataSearch;
      wzTbale.value.tableLoadData(true)

    }



    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (async() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      searchSubmit,//搜索方法
      wzTbale,// ref 使用 封装的表格
    }
  }
})


</script>
<style lang="less">
._wz_trainingRecordsDetails{
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 51px);
  }
}
</style>
